<template>
  <div style="min-width: 809px">
    <div v-if="$route.path == '/salaryList'">
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="门店">
            <!-- <el-radio-group v-model="radio">
              <el-radio :label="3">备选项</el-radio>
              <el-radio :label="6">备选项</el-radio>
              <el-radio :label="9">备选项</el-radio>
            </el-radio-group>
            <el-checkbox-group v-model="radio">
              <el-checkbox label="复选框 A"></el-checkbox>
              <el-checkbox label="复选框 B"></el-checkbox>
              <el-checkbox label="复选框 C"></el-checkbox>
            </el-checkbox-group> -->
            <el-select v-model="paging.store_id" placeholder="请选择">
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位">
            <el-select v-model="paging.position_id" placeholder="请选择">
              <el-option
                v-for="item in positionList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="员工姓名">
            <el-input
              style="width: 200px"
              v-model="paging.staff_name"
            ></el-input>
          </el-form-item>
          <el-form-item label="员工工号">
            <el-input
              v-model="paging.staff_num"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item label="薪资年月">
            <el-date-picker
              style="width: 200px"
              value-format="yyyy-MM"
              v-model="paging.month"
              @change="changeDate"
              type="month"
              placeholder="请选择"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="薪资单类别">
            <el-select v-model="paging.cate_id" placeholder="请选择">
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审批状态">
            <el-select
              clearable
              v-model="paging.apply_status"
              placeholder="请选择"
            >
              <el-option label="未提交" value="0"> </el-option>
              <el-option label="待审核" value="1"> </el-option>
              <el-option label="审核通过" value="2"> </el-option>
              <el-option label="审核驳回" value="3"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工资单发送状态">
            <el-select
              clearable
              v-model="paging.send_status"
              placeholder="请选择"
            >
              <el-option label="已发送" value="1"> </el-option>
              <el-option label="未发送" value="0"> </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <div class="operation-box clear-float">
          <!-- <el-button @click="operation(0, 8)" type="primary"
            >一键生成</el-button
          >
          <el-button
            icon="el-icon-upload2"
            @click="exportFile()"
            :loading="isExport"
            >导出</el-button
          >
          <el-button type="success" @click="batchOperation(1)" plain
            >一键发送</el-button
          >
          <el-button type="danger" @click="batchOperation(2)" plain
            >一键撤回</el-button
          >
          <el-button
            class="btn-upload"
            :loading="isDerive3"
            icon="el-icon-upload2"
            type="warning"
            plain
          >
            <input
              ref="uploadPai"
              @change="importData"
              type="file"
              name=""
              id=""
            />
            导入
          </el-button> -->
        </div>
        <el-table
          class="table"
          max-height="650"
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          show-summary
          :summary-method="getTotal"
        >
          <div class="right-oper"></div>
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column label="门店" width="80" fixed>
            <template slot-scope="scope" v-if="scope.row.store">
              <span>{{ scope.row.store.title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="薪资年月" width="60">
          </el-table-column>
          <el-table-column label="员工姓名" width="70" fixed>
            <template slot-scope="scope" v-if="scope.row.staff">
              <span>{{ scope.row.staff.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="员工工号" width="60" fixed>
            <template slot-scope="scope" v-if="scope.row.staff">
              <span>{{ scope.row.staff.number }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="岗位" width="60" fixed>
            <template slot-scope="scope" v-if="scope.row.position">
              <span>{{ scope.row.position.title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="薪资单类别" min-width="80">
            <template slot-scope="scope">
              <!-- <span>{{ scope.row.salaryCate.title }}</span> -->
              <el-select
                v-if="scope.row.salaryCate != null"
                v-model="scope.row.salaryCate.id"
                placeholder="请选择"
                :disabled="scope.row.isRead"
                :class="!scope.row.isRead ? 'border' : ''"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-select
                v-else
                v-model="scope.row.salaryCate_id"
                placeholder="请选择"
                :disabled="scope.row.isRead"
                :class="!scope.row.isRead ? 'border' : ''"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="base_wage" label="基本工资" min-width="100">
            <template slot-scope="scope">
              <input
                v-model="scope.row.base_wage"
                :readonly="scope.row.isRead"
                class="el-input__inner"
                :class="{ border: !scope.row.isRead }"
                type="number"
              />
            </template>
          </el-table-column>
          <el-table-column prop="float_wage" label="固定加班费" min-width="100">
            <template slot-scope="scope">
              <input
                v-model="scope.row.float_wage"
                :readonly="scope.row.isRead"
                class="el-input__inner"
                :class="{ border: !scope.row.isRead }"
                type="number"
              />
            </template>
          </el-table-column>
          <el-table-column prop="merit_wage" label="绩效工资" min-width="100">
            <template slot-scope="scope">
              <input
                v-model="scope.row.merit_wage"
                :readonly="scope.row.isRead"
                class="el-input__inner"
                :class="{ border: !scope.row.isRead }"
                type="number"
              />
            </template>
          </el-table-column>
          <el-table-column prop="full_wage" label="全勤奖" min-width="100">
            <template slot-scope="scope">
              <input
                v-model="scope.row.full_wage"
                :readonly="scope.row.isRead"
                class="el-input__inner"
                :class="{ border: !scope.row.isRead }"
                type="number"
              />
            </template>
          </el-table-column>
          <el-table-column label="敬业奖" min-width="100" prop="loyal_wage">
            <template slot-scope="scope">
              <input
                v-model="scope.row.loyal_wage"
                :readonly="scope.row.isRead"
                class="el-input__inner"
                :class="{ border: !scope.row.isRead }"
                type="number"
              />
            </template>
          </el-table-column>
          <el-table-column label="补贴" min-width="100" prop="subsidy_wage">
            <template slot-scope="scope">
              <input
                v-model="scope.row.subsidy_wage"
                :readonly="scope.row.isRead"
                class="el-input__inner"
                :class="{ border: !scope.row.isRead }"
                type="number"
              />
            </template>
          </el-table-column>
          <el-table-column label="其他收入" min-width="100" prop="other_wage">
            <template slot-scope="scope">
              <input
                v-model="scope.row.other_wage"
                :readonly="scope.row.isRead"
                class="el-input__inner"
                :class="{ border: !scope.row.isRead }"
                type="number"
              />
            </template>
          </el-table-column>
          <el-table-column prop="royalty_wage" label="提成" min-width="100">
            <template slot-scope="scope">
              <input
                v-model="scope.row.royalty_wage"
                :readonly="scope.row.isRead"
                class="el-input__inner"
                :class="{ border: !scope.row.isRead }"
                type="number"
              />
            </template>
          </el-table-column>

          <el-table-column
            label="考勤扣款"
            min-width="100"
            prop="full_deduction"
          >
            <template slot-scope="scope">
              <input
                v-model="scope.row.full_deduction"
                :readonly="scope.row.isRead"
                class="el-input__inner"
                :class="{ border: !scope.row.isRead }"
                type="number"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="其他扣款"
            min-width="100"
            prop="other_deduction"
          >
            <template slot-scope="scope">
              <input
                v-model="scope.row.other_deduction"
                :readonly="scope.row.isRead"
                class="el-input__inner"
                :class="{ border: !scope.row.isRead }"
                type="number"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="total_payable"
            label="应发合计"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            label="个人社保扣款"
            min-width="100"
            prop="social_deduction"
          >
            <template slot-scope="scope">
              <input
                v-model="scope.row.social_deduction"
                :readonly="scope.row.isRead"
                class="el-input__inner"
                :class="{ border: !scope.row.isRead }"
                type="number"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="个人公积金扣款"
            min-width="100"
            prop="fund_deduction"
          >
            <template slot-scope="scope">
              <input
                v-model="scope.row.fund_deduction"
                :readonly="scope.row.isRead"
                class="el-input__inner"
                :class="{ border: !scope.row.isRead }"
                type="number"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="个人所得税扣款"
            min-width="100"
            prop="income_deduction"
          >
            <template slot-scope="scope">
              <input
                v-model="scope.row.income_deduction"
                :readonly="scope.row.isRead"
                class="el-input__inner"
                :class="{ border: !scope.row.isRead }"
                type="number"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="advance_deduction"
            label="预支工资"
            min-width="100"
          >
            <template slot-scope="scope">
              <input
                v-model="scope.row.advance_deduction"
                :readonly="scope.row.isRead"
                class="el-input__inner"
                :class="{ border: !scope.row.isRead }"
                type="number"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="total_deduction"
            label="扣款合计"
            min-width="100"
          >
          </el-table-column>
          <el-table-column prop="net_salary" label="实发工资" min-width="100">
          </el-table-column>
          <el-table-column prop="remark" label="备注信息" min-width="80">
          </el-table-column>
          <el-table-column label="审批状态" min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.apply_status | apply_status }}</span>
            </template>
          </el-table-column>
          <el-table-column label="工资单发送状态" min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.send_status | send_status }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否确认" min-width="80">
            <template slot-scope="scope" v-if="scope.row.send_status == 1">
              <span>{{ scope.row.is_confirm == 1 ? "已确认" : "未确认" }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="price"
            label="操作"
            min-width="110"
            fixed="right"
          >
            <template slot-scope="scope">
              <span
                v-if="
                  scope.row.apply_status == 0 || scope.row.apply_status == 3
                "
                @click="operation(scope.row, 1)"
                class="tab-table-text"
                >编辑</span
              >
              <span
                v-if="
                  scope.row.apply_status == 0 || scope.row.apply_status == 3
                "
                @click="operation(scope.row, 2)"
                class="tab-table-text"
                >保存</span
              >
              <span
                v-if="scope.row.apply_status == 1"
                @click="operation(scope.row, 9)"
                class="tab-table-text"
                >同意</span
              >
              <span
                v-if="scope.row.apply_status == 1"
                @click="operation(scope.row, 10)"
                class="tab-table-text"
                >驳回</span
              >
              <span
                v-if="
                  scope.row.apply_status == 0 || scope.row.apply_status == 3
                "
                @click="operation(scope.row, 3)"
                class="tab-table-text"
                >提交</span
              >
              <span
                v-if="
                  (scope.row.apply_status == 1 && scope.row.send_status != 1) ||
                  (scope.row.apply_status == 2 && scope.row.send_status != 1)
                "
                @click="operation(scope.row, 4)"
                class="tab-table-text"
                >撤回</span
              >
              <span
                v-if="scope.row.apply_status == 2 && scope.row.send_status == 0"
                @click="operation(scope.row, 5)"
                class="tab-table-text"
                >发送工资单</span
              >
              <span @click="operation(scope.row, 11)" class="tab-table-text"
                >查看</span
              >
            </template>
          </el-table-column> -->
        </el-table>
        <!-- <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div> -->
      </div>
    </div>
    <el-dialog
      title="工资单确认"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div v-if="details">
        <p class="send_title" v-if="details.staff.name">
          工资单确认发送至 {{ details.staff.name }}
        </p>
        <p class="send_price">
          {{ details.date[1] }}月薪资实发为：{{ details.net_salary }} 元
        </p>
      </div>
      <div v-else>
        <p class="send_price">
          {{ confirmAmount.date[1] }}月薪资实发为：{{
            confirmAmount.totalPrice
          }}
          元
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogVisible = false;
            handleClose();
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="send()">确 定</el-button>
      </span>
    </el-dialog>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "",
      isExport: false,
      recordList: [],
      loading: false,
      loading2: false,
      isBtn: false,
      isInfo: false,
      dialogVisible: false,
      isDerive3: false,
      multipleSelection: [],
      paging: {
        month: "",
        store_id: "",
        position_id: "",
        staff_name: "",
        staff_num: "",
        cate_id: "",
        apply_status: "",
        send_status: "",
        page: 1,
        total: 0,
        limit: 10,
      },
      form: {
        date: "",
      },
      details: {
        staff: {
          name: "",
        },
        date: ["1", "2"],
      },
      confirmAmount: {
        totalPrice: "",
        date: "",
      },
      salaryCate_id: "",
      tableData: [],
      typeList: [], //薪资单类别列表
      storeList: [], //所有门店列表
      positionList: [], //所有岗位列表
    };
  },
  created() {
    // let date = this.utils.timeMonth(new Date()).split('-');
    // if(date[1]*1 == 1){
    //     this.paging.month = date[0]+'-'+ date[1]
    // }else{
    //     this.paging.month = date[0]+'-'+ (date[1]*1 - 1)
    // }

    let date = this.utils.timeMonth(new Date());
    this.paging.month = date;
    console.log(this.paging, "date");
    this.repairGetList();
    this.allList();
    this.homegetStore();
    this.homegetPosition();
  },
  filters: {
    apply_status(val) {
      switch (val) {
        case 0:
          val = "未提交";
          break;
        case 1:
          val = "待审核";
          break;
        case 2:
          val = "审核通过";
          break;
        case 3:
          val = "审核驳回";
          break;
      }
      return val;
    },
    send_status(val) {
      switch (val) {
        case 0:
          val = "未发送";
          break;
        case 1:
          val = "已发送";
          break;
      }
      return val;
    },
  },
  methods: {
    // 批量操作
    async batchOperation(type) {
      // scope.row.apply_status == 2 && scope.row.send_status == 0 发送
      //  scope.row.apply_status == 1 || scope.row.apply_status == 2 撤回
      // if (!this.multipleSelection.length) {
      //   this.$message.error("请选择要操作的员工");
      //   return;
      // }
      // let id = [];
      // this.multipleSelection.forEach((ele) => {
      //   id.push(ele.id);
      // });
      if (type == 1) {
        //发送
        let arr = [];
        this.tableData.forEach((ele) => {
          if (ele.apply_status == 2 && ele.send_status == 0) {
            arr.push(ele);
          }
        });
        if (!arr.length) {
          this.$message.error("暂无符合条件发送薪资的员工");
          return;
        }
        this.multipleSelection = arr;
        this.dialogVisible = true;
        this.details = "";
        let money = 0;
        arr.forEach((ele) => {
          money = money + ele.net_salary;
        });
        this.confirmAmount.date = this.multipleSelection[0].date.split("-");
        this.confirmAmount.totalPrice = money;
      } else {
        //撤回
        let arr = [];
        this.tableData.forEach((ele) => {
          if (
            (ele.apply_status == 1 && ele.send_status != 1) ||
            (ele.apply_status == 2 && ele.send_status != 1)
          ) {
            arr.push(ele);
          }
        });
        if (!arr.length) {
          this.$message.error("暂无符合撤回的员工");
          return;
        }
        let id = [];
        arr.forEach((ele) => {
          id.push(ele.id);
        });
        console.log(id, "可以撤回的id数组");
        this.$msgbox({
          title: "提示",
          message: "是否要撤回此薪资单?",
          type: "warning",
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: async (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "撤回中...";
              let { code, data } = await this.$Http.submitSalary({
                ids: id.join(","),
                status: 0,
              });
              if (code) {
                this.$message.success("您已撤回");
                this.handleCurrentChange(1);
              }
              done();
              instance.confirmButtonLoading = false;
            } else {
              done();
            }
          },
        })
          .then((action) => {})
          .catch(() => {});
      }
    },
    // 导入数据
    async importData(e) {
      let file = e.target.files[0];
      if (!file) return;
      this.$refs.uploadPai.value = "";
      this.isDerive3 = true;
      let { code, data } = await this.$Http.upload({ files: file }, true);
      if (code) {
        this.uploadFile(data);
      }
    },
    async uploadFile(file) {
      let { code, data } = await this.$Http.importSalary({ path: file }, true);
      this.isDerive3 = false;
      if (code) {
        this.$message.success("导入成功!");
        this.handleCurrentChange(1);
      }
    },
    // 导出文件
    async exportFile() {
      this.isExport = true;
      let res = await this.$Http.exportSalary(this.paging);
      this.utils.downloadXlsx(res, "薪资单列表");
      this.isExport = false;
    },
    getTotal(param) {
      const { columns, data } = param;
      const sums = [];
      console.log(columns, data);
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        //calcProp 为需要计算的列的prop值的集合
        const calcProp = [
          "base_wage",
          "float_wage",
          "merit_wage",
          "full_wage",
          "loyal_wage",
          "subsidy_wage",
          "other_wage",
          "royalty_wage",
          "full_deduction",
          "other_deduction",
          "social_deduction",
          "fund_deduction",
          "income_deduction",
          "total_payable",
          "total_deduction",
          "net_salary",
          "advance_deduction",
        ];
        if (calcProp.includes(column.property)) {
          const values = data.map((item) => Number(item[column.property]));
          console.log(values, "values");
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              console.log(2);

              return prev;
            }
          }, 0);
        }
      });
      let arr = [];
      sums.forEach((ele, i) => {
        if (i != 0) {
          sums[i] = Number(ele).toFixed(2);
        }
        // console.log(ele,"444444444")
        // ele = ele.toFixed(2)
      });
      console.log(sums, "sumssumssumssumssumssumssumssums");
      return sums;
    },
    handleClose(dom) {
      this.details = this.$options.data().details;
      this.dialogVisible = false;
      dom && dom();
    },
    // 发送薪资单
    async send() {
      let id;
      if (this.multipleSelection.length) {
        let arr = [];
        this.multipleSelection.forEach((ele) => {
          arr.push(ele.id);
        });
        id = arr.join(",");
      } else {
        id = JSON.stringify(this.details.id);
      }
      console.log(id, "可发送的id");
      let { code, data } = await this.$Http.sendSalary({
        ids: id,
      });
      if (code) {
        this.$message.success("发送成功");
        this.repairGetList();
        this.handleClose();
      }
    },
    async operation(row, type) {
      if (type == 1) {
        //编辑
        row.isRead = false;
      } else if (type == 2) {
        //保存
        console.log(row.id, "777777777777");
        let params = {
          id: row.id,
          base_wage: row.base_wage,
          salary_cate_id:
            row.salaryCate != null ? row.salaryCate.id : row.salaryCate_id,
          float_wage: row.float_wage,
          merit_wage: row.merit_wage,
          full_wage: row.full_wage,
          loyal_wage: row.loyal_wage,
          other_wage: row.other_wage,
          other_deduction: row.other_deduction,
          social_deduction: row.social_deduction,
          fund_deduction: row.fund_deduction,
          income_deduction: row.income_deduction,
          full_deduction: row.full_deduction,
          royalty_wage: row.royalty_wage,
          subsidy_wage: row.subsidy_wage,
          advance_deduction: row.advance_deduction,
        };
        console.log(params, "paramsparamsparams");
        let { code, data } = await this.$Http.setSalary(params);
        if (code) {
          this.$message.success("修改成功");
          this.handleCurrentChange(1);
        }
      } else if (type == 3) {
        //提交
        let { code, data } = await this.$Http.submitSalary({
          ids: JSON.stringify(row.id),
          status: 1,
        });
        if (code) {
          this.$message.success("提交成功");
          this.handleCurrentChange(1);
        }
      } else if (type == 4) {
        //撤回
        let { code, data } = await this.$Http.submitSalary({
          ids: JSON.stringify(row.id),
          status: 0,
        });
        if (code) {
          this.$message.success("您已撤回");
          this.handleCurrentChange(1);
        }
      } else if (type == 5) {
        //发送工资单
        row.date = row.date.split("-");
        this.details = row;
        this.dialogVisible = true;
      } else if (type == 8) {
        //一键生成
        let { code, data } = await this.$Http.createSalary({
          month: this.paging.month,
        });
        if (code) {
          this.$message.success("生成成功");
        }
      } else if (type == 9) {
        //同意
        this.$msgbox({
          title: "提示",
          message: "是否确认审核?",
          type: "warning",
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: async (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "执行中...";
              let { code, data } = await this.$Http.applySalary({
                id: row.id,
                status: 2,
              });
              if (code) {
                this.$message.success("您已同意");
                this.repairGetList();
              }
              done();
              instance.confirmButtonLoading = false;
            } else {
              done();
            }
          },
        })
          .then((action) => {})
          .catch(() => {});
      } else if (type == 10) {
        //驳回
        this.$msgbox({
          title: "提示",
          message: "是否要驳回此薪资单?",
          type: "warning",
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: async (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "执行中...";
              let { code, data } = await this.$Http.applySalary({
                id: row.id,
                status: 3,
              });
              if (code) {
                this.$message.success("您已成功驳回");
                this.repairGetList();
              }
              done();
              instance.confirmButtonLoading = false;
            } else {
              done();
            }
          },
        })
          .then((action) => {})
          .catch(() => {});
      } else if (type == 11) {
        this.utils.goUrl(`/salaryInfo?id=${row.id}`);
      }
    },
    setRow(ele, type) {
      if (type == 1) {
        this.utils.goUrl(`/salaryCardDetails?title=新增`);
      } else if (type == 2) {
        this.utils.goUrl(`/salaryCardDetails?id=${ele.id}&title=编辑`);
      } else {
        this.$msgbox({
          title: "提示",
          message: "您确定要删除此类别吗?",
          type: "warning",
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: async (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "删除中...";
              let { code, data } = await this.$Http.delSalary({ id: ele.id });
              if (code) {
                this.$message.success("删除成功!");
                this.handleCurrentChange(1);
              }
              done();
              instance.confirmButtonLoading = false;
            } else {
              done();
            }
          },
        })
          .then((action) => {})
          .catch(() => {});
      }
    },
    changeDate(e) {
      console.log(e, "1111111111");
    },
    // 获取全部门店
    async homegetStore() {
      let { code, data } = await this.$Http.homegetStore();
      if (code) {
        this.storeList = data;
      }
    },
    // 获取岗位
    async homegetPosition() {
      let { code, data } = await this.$Http.homegetPosition();
      if (code) {
        this.positionList = data;
      }
    },
    // 获取薪资单类别
    async allList() {
      let { code, data } = await this.$Http.getSalaryCate({ is_all: 1 });
      if (code) {
        this.typeList = data;
        console.log(this.typeList, "typeListtypeListtypeList");
      }
    },
    async repairGetList() {
      this.loading = true;
      let { code, data } = await this.$Http.getSalary(this.paging);
      this.loading = false;
      if (code) {
        data.forEach((ele) => {
          if (ele.salaryCate == null) {
            ele.salaryCate_id = "";
          }
          ele.isRead = true;
          // 应发
          ele.total_payable =
            ele.base_wage * 1 +
            ele.float_wage * 1 +
            ele.merit_wage * 1 +
            ele.full_wage * 1 +
            ele.loyal_wage * 1 +
            ele.other_wage * 1 +
            ele.subsidy_wage * 1 +
            ele.royalty_wage * 1;
            ele.total_payable = Number(ele.total_payable).toFixed(2)
          // 扣款
          ele.total_deduction =
            (ele.full_deduction * 1 +
            ele.other_deduction * 1 +
            ele.social_deduction * 1 +
            ele.fund_deduction * 1 +
            ele.advance_deduction * 1 +
            ele.income_deduction * 1).toFixed(2);
            // 实发
          ele.net_salary = Number(ele.total_payable - ele.total_deduction).toFixed(2)
        });
        this.tableData = data;
        // this.paging.total = data.total;
      }
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.repairGetList();
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      let date = this.utils.timeMonth(new Date());
      this.paging.month = date;
      this.handleCurrentChange(1);
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}

::v-deep {
  .el-radio__input.is-checked .el-radio__inner::after {
    content: "";
    width: 10px;
    height: 5px;
    border: 2px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 4px;
    left: 3px;
    vertical-align: middle;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
  }
  .table {
    //   .has-gutter{
    //       .is-hidden{
    //           position: sticky;
    //           left: 0;
    //           top: 0;
    //           background: red !important;
    //       }
    //   }
    // .el-table__fixed, .el-table__fixed-right{
    //     z-index: 99;
    //     // top: -50px;
    //     &::before{
    //         display: block;
    //         height: 50px;
    //         position: absolute;
    //         top: -50px;
    //     }
    // }
    .el-table__footer-wrapper {
      // position: relative;
      &::before {
        content: "";
        display: block;
        height: 50px;
        position: sticky;
        width: 270px;
        top: 50px;
        left: 0;
        background: #f5f7fa;
        z-index: 99;
      }

      .el-table__footer {
        position: absolute;
        left: 0;
        top: 0;

        // &::before{
        //     content: '';
        //     display: block;
        //     height: 50px;
        //     position: sticky;
        //     width: 270px;
        //     top: 50px;
        //     right: 0;
        //     background: #F5F7FA;
        //     z-index: 99;
        // }
        // ::after {
        //     content: url(smiley.gif);
        // }
        .has-gutter {
        }
      }
    }
    .el-input__inner {
      border: 0;
    }
    .border {
      border: 1px solid #dcdfe6;
      border-radius: 6px;
    }
  }
  // 1px solid #DCDFE6
  .el-table {
    position: relative;
    overflow: inherit;
  }
  .el-table__footer-wrapper {
    background: #f5f7fa;
    position: absolute;
    top: -42px;
    z-index: 99;
  }
  // .el-table__fixed-footer-wrapper tbody td.el-table__cell {
  //   position: absolute;
  // }
  .el-table__fixed-footer-wrapper tbody td {
    position: absolute;
  }
}

.operation-box {
  margin-bottom: 70px;
}
.operation-box {
  display: flex;
  justify-content: flex-end;
}
.price {
  ::v-deep {
    .el-input {
      width: 350px;
      margin-right: 20px;
    }
  }
}
.send_title {
  margin-top: 0;
  font-size: 24px;
}
.send_price {
  font-size: 18px;
}
.btn-upload {
  position: relative;
  overflow: hidden;
  input[type="file"] {
    width: 100%;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
  }
  input[type="file"]::-webkit-file-upload-button {
    cursor: pointer;
  }
}
</style>